<!-- 轮播图组件 -->
<template>
    <div id="main" >
        <el-carousel height="70vh" :autoplay="true" type="card">
            <el-carousel-item v-for="item in imgs" :key="item.id">
                <img :src="item.url" :alt="item.id">
            </el-carousel-item>
        </el-carousel>
        <p>见证每一刻的光点</p>
    </div>
</template>

<script>
export default {
    name: 'MyCarousel',
    data() {
        return {
            imgs: [{
                url: require("../../assets/wuchen.jpg"),
                id: 3
            }]
        }
    },
    mounted(){
        // localStorage.setItem("imgs",JSON.stringify(this.imgs));
        this.imgs = JSON.parse(localStorage.getItem("imgs"));
    }
}
</script>

<style scoped>
#main {
    width: 100%;
    padding: 2vw;
    background-color: #f8fafc;
    
}

P {
    font-size: 48px;
    font-weight: bold;
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* 使文本颜色透明 */
}

img {
    width: 100%;
}
</style>